/* DIALOG
 *  A wrapper for the jQuery UI modal dialog.
 */
CE.WIDGETS.DIALOG = {

    $: null,
    
    init: function () { 
    
        // initialize the dialog widget for use. 
        this.$ = $("#ce_dialog").hide().find('.close-button').click(
            this.close.createDelegate(this)
        ).end();
        this.$stem = $('.ce-stem');
        
        this.$.jqDrag('.dialog-title',(function() {
            this.$stem.hide();
        }).createDelegate(this));

    },

    /*  DIALOG.draw()
     *  Options:
     *    string opts.title - the title to display at the top of the new window.
     *    query content - jQuery content to display in the window.
     *    number width - the width of the dialog to draw.
     */
    draw: function (opts) {
        
        // default options.
        opts = $.extend({
            title: 'Untitled',
            content: '',
            width:450,
            on_click: function (evt) {}
        }, opts);
        
        this.on_click = opts.on_click;
        
        this.$.show()
            .find(".dialog-title").text(opts.title).end()
            .width(opts.width)
            .find(".inner")
                .find("*").unbind().end()
            .empty().append(opts.content);
            
        this.$stem.hide();
        
        return this.$;
    },
    
    // draw a stem to a point on the screen, from the dialog.
    stem: function(x,y) {
        // draw a stem object pointing to the media feature
        $('.ce-stem').stem({
            focus: {
                l: x,
                t: y,
                w: 20,
                h: 25
            },
            frame: this.$,
            bounds: $('#ce_map'),
            media_path: '/media/img/'
        });
    },
    
    close: function () {
        this.$.hide();
        this.$stem.hide();
    }
};
